<template>

  <div class="product_video" style="height: 300px">
    <h3>Product Usage List Video</h3>
    <p>See how other users use it</p>
  </div>

  
  <div class="product_video_item">
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="(item, index) in (videoData as any)" :key="index">
          <video controls width="auto" height="100%">
            <source :src="item.src" type="video/mp4">
          </video>
        </el-carousel-item>
      </el-carousel>
    </div>
</template>


<script lang="ts">
import { getVideo } from '@/api/api';

  export default {
    name: "ProductVideo",

    setup(){
      const data = reactive({
        videoData: [],
      })


      getVideo('').then((res: any) => {
        data.videoData = res._rawValue.title
      }).catch((err: any) => {
        console.log(err + '请求失败')
      })



      return{
        ...toRefs(data),

      }
    },
    components: {
      
    }
  }


</script>



<style scoped>

.product_video {
  padding: 70px  0;
  text-align: center;
  margin-bottom: 100px;
}

.product_video h3 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 1px;
}

.product_video p {
  font-size: 17px;
}

.product_video_item {
  margin-top: -100px;
}



</style>